<template>
  <div id="wrap">
    <button @click="isShow = !isShow">按钮</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Anime3",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
     //动画钩子函数接受一个el作为参数,代表的是当前的dom元素
    beforeEnter(el) {
        //在开始动画的时候 都是初始位置为0
      el.style.transform = "translate(0,0)";
      console.log("beforeEnter");
    },
     //oneEnter接受第二个参数,是oneAfterEnter这个钩子
    enter(el, done) {
      el.offsetWidth;
      //当开始执行动画的时候,我们设置他的终点位置和过渡效果
      el.style.transition = "all 1s linear";
      el.style.transform = "translate(340px,300px)";
      console.log("enter");
       //提前执行oneAfterEnter钩子
      done();
    },
    afterEnter(el) {
      this.isShow = !this.isShow;
      console.log("afterEnter");
    },
  },
};
</script>

<style scoped>
#wrap div {
  width: 50px;
  height: 50px;
  border-radius: 20%;
  background-color: rgb(255, 179, 191);
}
</style>
